<template>
	<div class="mui-content mb-70">
		<div class="by-item-tit font-normal font-14">套餐</div>
		<div class="mui-table-view-cell font-14 box" v-for="(index,item) in tcList">
			<div>
				<span class="by-item font-17">{{item.tcName}}</span>
				<span class="text-label bg-color-green color-white">优惠{{item.tcJmfy}}元</span>
			</div>
			<p>包括更换机油，更换机油滤芯，38项检测</p>
			<i class="iconfont font-20 select-icon" :class="{'active':item.selected}" @click="toggleSelect(item)">&#xe62d;</i>
		</div>
		<!-- 单独项目 -->
		<div class="by-item-tit font-normal font-14">单独项目</div>
		<div class="mui-table-view-cell font-14 box" v-for="(index,item) in xmList">
			<div class="col-8">{{item.xmName}}</div>
			<div class="col-4 mui-text-right by-item-icon"><i class="iconfont font-20" :class="{'active':xmList[index].selected}" @click="toggleSelect(item)">&#xe62d;</i></div>
		</div>
		<div class="bottom-bar bg-color-white">
			<div class="by-item-confirm bg-color-blue color-white tc" @click="byItemSave()">保存</div>
		</div>
	</div>
</template>
<style type="text/css" scoped>
	.by-item-tit{line-height:34px;padding-left:15px;}
	.text-label{padding:3px 8px;border-radius:2px;}
	.by-item-icon i{line-height:1.0;color:#ccc;}
	.by-item-confirm{position:fixed;bottom:10px;left:10px;right:10px;padding:10px 0;border-radius:2px;}
	.select-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#ccc;}
	.iconfont.active{color:#4cd964;}
	.mb-70{margin-bottom:70px;}
	.bottom-bar{height: 1.2rem;position: fixed;bottom: 0;left: 0;right: 0;}
</style>
<script type="text/ecmascript-6">
	import Page from '../../base/Page'
	import { API } from '../../config/constants'
	export default new Page({
		vuex:{
			actions:{
				saveByItem:function({dispatch},data){
					dispatch('UPD_MAINTENANCE_ITEM',data)
				},
				updMaintenanceItemNum:function({dispatch},data){
					dispatch('UPD_MAINTENANCE_ITEM_NUM',data);
				}
			},
			getters:{
				byItemTcList:function(state){
					return state.maintenanceOrder.byItem.tcList
				},
				byItemXmList:function(state){
					return state.maintenanceOrder.byItem.xmList
				},
				byItemNum:function(state){
					return state.maintenanceOrder.byItemNum
				}
			}
		},
		data(){
			return{
				byItem:{tcList:{},xmList:{}},
				byItemNum2:'',
				tcList:[],
				xmList:[]
			}
		},
		ready(){
			let that = this;
			//init byItems
			that.getJSON(API.GET_ALL_ITEMS,{planType:3},res=>{
				//如果vuex中是选中的，则高亮
				that.tcList.push(res.resultData.tcList[0]);
				if(that.byItemTcList[0].selected){
					that.tcList[0].selected = true;
				}
				res.resultData.xmList.forEach(function(item){
					that.xmList.push(item);
				})
				that.byItemXmList.forEach(function(item,index){
					if(item.selected){
						that.xmList[index].selected = true;
					}else{
						that.xmList[index].selected = false;
					}
				})
			})
			//init byItem num
			that.byItemNum2 = that.byItemNum;
		},
		methods:{
			//toggle select maintenceItem
			toggleSelect(item){
				let that = this;
				item.selected = !item.selected;
				item.selected ? item.isBzdjm=0 : item.isBzdjm=1;
				item.selected ? that.byItemNum2++ : that.byItemNum2--;
			},
			//save selected maintenanceItem info
			byItemSave(){
				let that = this;
				that.byItem.tcList = that.tcList;
				that.byItem.xmList = that.xmList
				that.saveByItem(that.byItem);
				that.updMaintenanceItemNum(that.byItemNum2);
				that.$route.router.go('/maintenance/' + 'moreItems');
			}
		}
	})
</script>
